<template>
  <div>
    <el-select v-model="newValue" placeholder="请选择" filterable clearable :value="value" @change="serarchData">
      <el-option v-for="(item,index) in options" :key="`option_${index}${item.value}`" :label="item.dictLabel" :value="item.dictValue" />
    </el-select>
  </div>
</template>

<script>
export default {
  name: 'OnlineCascader',
  props: {
    item: {
      type: Object,
      required: false,
      default: () => {}
    },
    dictOptions: {
      type: Array,
      default: () => [],
      required: false
    },
    value: {
      type: String,
      default: () => '',
      required: false
    }

  },
  data() {
    return {
      dealId: this.$route.query.id,
      fundId: this.$route.query.id,
      companyId: this.$route.query.companyId,
      options: this.dictOptions,
      newValue: this.value
    }
  },
  computed: {
    guid() {
      return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
        var r = Math.random() * 16 | 0
        var v = c === 'x' ? r : (r & 0x3 | 0x8)
        return v.toString(16)
      })
    },
    fieldConfig() {
      return this.item
    }
  },

  watch: {
    dictOptions: {
      handler(value) {
        this.options = value
        if (!value) {
          this.options = []
        }
      },
      deep: true,
      immediate: true
    },
    value(val) {
      this.newValue = val
    },
    newValue: {
      handler(val) {
        if (!val) {
          this.newValue = ''
        }
        // this.serarchData(val)
        this.$emit('input', val)
        this.$emit('change', val)
      },
      deep: true,
      immediate: true
    }

  },
  created() {
  },
  methods: {
    serarchData(val) {
      // console.log('当前级联组件选中的值', val, this.fieldConfig.cascaderProp)
      this.$emit('receve', val, this.fieldConfig.cascaderProp)
    }
  }

}
</script>

<style>

</style>
